<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta http-equiv="Cache-Control" content="no-transform" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="generator" content="HBuilder X 2.9.3" />
		<meta name="description" content="iou.ink" />
		<meta name="author" content="1074637681@qq.com" />

		<title>ESP-WROOM-32</title>
		<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

	</head>
	<body>


		<div id="mainframe" style="margin: 0 auto;align-items: center;text-align: center;">
			<div id="background">
				<img src="https://iou.ink/file/img/W1237.webp">
			</div>
			<div id="topic" style="color: #1890FF;font-size: 28px;">
				<i class="fa fa-microchip"  aria-hidden="true"></i>ESP-32 控制面板</div>
			<br><div style="color: white;width: auto;text-align: center;"><span style="background-color: rgba(0, 0, 0, 0.5)">ESP状态：<a id="ESPState"></a></span></div>
			
			<div id="mianclick" >
				<div id="LightControl" class="clickarea">
					<i style="color: white;" class="fa fa-lightbulb-o fonticon"  aria-hidden="true"></i>
					<a class="textdata" >开关灯</a>
				</div><br>
				<div id="IRControl" class="clickarea">
					<i style="color: white;" class="fa fa-podcast fonticon" aria-hidden="true"></i>
					<a class="textdata">红外遥控</a>
				</div><br>
				<div id="wakeupPC" class="clickarea">
					<i style="color: white;" class="fa fa-laptop fonticon" aria-hidden="true"></i>
					<a class="textdata"  style="text-decoration: line-through;">唤醒电脑</a>
				</div><br>
				<div id="execCMD" class="clickarea">
					<i style="color: white;" class="fa fa-code								 fonticon" aria-hidden="true"></i>
					<a class="textdata"  style="text-decoration: line-through;">执行自定义命令</a>
				</div><br>



				<style type="text/css">
					.clickarea {
						margin: 0 auto;
						display: none;
						width: 550px;
						max-width: 95%;
						height: 60px;
						border: 5px solid rgba(255, 255, 255,0.8);
						background-color: rgba(0, 0, 0, 0.4);
						cursor: pointer;

					}

					.textdata {
						font-size: 36px;
						color: white;
						text-decoration: none;
					}

					.fonticon {
						font-size: 36px;
						color: red;
					}

					#mianclick {
						margin: 0 auto;
						margin-top: 15vh;
						height: auto;
						border-radius: 10px;
						z-index: 1;
						align-items: center;
					}
				</style>

			</div>

			<div id="chuangkou1" class="chuangkou" style="display: none;">

				<form>
					<i onclick="backtomain()"  style="color: white;float: left;line-height: 50px;" class="fa fa-chevron-left fonticon" aria-hidden="true"></i>
					<div style="font-size: 36px;">信息门户登陆</div>
					
					
					
					学号:<input type="text" class="tl-price-input" name="xuehao" value="">
					<br>
					密码:<input type="password" class="tl-price-input" name="passwd" value="">
					<br>
					填报地址:<input type="text" class="tl-price-input address" name="address" placeholder="请参照今日校园APP填写" value="">
					<br>
					邮箱:<input type="email" class="tl-price-input" name="email" placeholder="可选,用于消息通知" value="">
					<br>

					<input type="button" class="ant-btn ant-btn-primary" value="验证信息" onclick="jiaru()">

				</form>

			</div>



		</div>

	</body>
	<script type="text/javascript">
		window.onload = function() {
			var WidthtoHeight =document.body.clientWidth/document.body.clientHeight;
			if(WidthtoHeight >1.6){
				console.log("WidthtoHeight:"+WidthtoHeight);
				$("#background").html('<img src="https://xyxywan.gitee.io/web/img/banner_bg2.webp">');
			}
			$("#LightControl").delay("200").fadeIn();
			$("#IRControl").delay("400").fadeIn();
			$("#wakeupPC").delay("600").fadeIn();
			$("#execCMD").delay("800").fadeIn();
			ESP_state();
			setInterval(function() {
					ESP_state();
				}, 5000);
			}

		//var APIURL = "http://192.168.123.23:8032/";
		var APIURL = "https://127.0.0.1:8032/";
		var YaoKongQiURL ="XXXXXXXXXXX";

		$(document).ready(function() {
			$("#LightControl").click(function() {
				LightControl();
			});
		
			$("#IRControl").click(function() {
				window.open(YaoKongQiURL);
		
			});
		
			$("#wakeupPC").click(function() {
				console.log("click");
		
		
			});
		
			$("#execCMD").click(function() {
				execCMD();
			});
		
		
		
		});
		
		
		function backtomain() {
			$(".chuangkou").css('display', 'none');
			$('#LightControl').css('display', 'none');
			$('#IRControl').css('display', 'none');
			$('#wakeupPC').css('display', 'none');
			$('#execCMD').css('display', 'none');
			setTimeout(function() {
				$("#mianclick").css('display', 'block');
				$("#LightControl").delay("200").fadeIn();
				$("#IRControl").delay("400").fadeIn();
				$("#wakeupPC").delay("600").fadeIn();
				$("#execCMD").delay("800").fadeIn();
			}, 300);
		}
		
		
		var choice="";
		function LightControl() {
			swal("选择开关灯", {
					buttons: {
						choice1: {
						      text: "开灯",
						      value: "catch1",
						    },
						choice2: {
						      text: "关灯",
						      value: "catch2",
						    },
					},
				})
				.then((value) => {
					switch (value) {
						case "catch1":
							swal("正在请求，请稍后", "", "warning");
							async_req("send_cmd?info=LightSwitch&cmd=lighton");
							break;
						case "catch2":
							swal("正在请求，请稍后", "", "warning");
							async_req("send_cmd?info=LightSwitch&cmd=lightoff");
							break;
						default:
							console.log("exitWindow");
					}
				});
		
		}

		function async_req(data){
			url = APIURL + data;try {
				tobj1 = $.ajax({
					url: url,
					async: true,
					success: function(data) {
						swal(data.info, "", data.type);
					}
				});
			} catch (e) //IE
			{
				swal("error request");
			}
		}
		
		function ESP_state() {
			url4 = APIURL + "check_state";
			try {
				tobj1 = $.ajax({
					url: url4,
					async: true,
					timeout : 5000,
					success: function(data) {
						//$("#ESPState").text("" +(data.info).toString());
						if (data.type=="error"){
							$("#ESPState").html('<a style="color:red">'+(data.info).toString()+'</a>');
						}else{
							$("#ESPState").html('<a style="color:green">'+(data.info).toString()+'</a>');
						}
						
					}
				});
			} catch (e) { //IE
					$("#ESPState").html('<a style="color:red">服务器离线</a>');
				swal("error request");
			}
		}
		
		function execCMD(){
			  var pyhtonCode=prompt("执行micropython语句，用分号隔开","")
			  if (pyhtonCode!=null && pyhtonCode!="")
			    {
				async_req("send_cmd?info=execpython&cmd="+pyhtonCode);
				swal("正在请求，请稍后", "", "warning");
			    }
		}
	</script>
	<style type="text/css">
		body{
			width: 100%;
			top:0px;
			left: 0px;	
			padding: 0;
			margin: 0;
			text-align: center;
		}
		#topic{
			margin:0 auto;
			width: 100%;
			height: 40px;
			color: #FFFFFF;
			font-size: 84px;
			
			background-color: rgba(0, 0, 0, 0.4);
		}
		.chuangkou{
			margin:0 auto;
			margin-top: 15vh;
			font-size: 38px;
			height: auto;
			
			max-width: 80%;
			width: 500px;
			color: #ffffff;
			border-radius: 10px;
			background-color: rgba(0, 0, 0, 0.5);
			font-family: 仿宋;
			font-weight: 600;
			z-index: 1;
		}
		#background{
			width: 100%;
			position:fixed;
			text-align: center;
			display: flex;
			justify-content: center;
			z-index: -1;
		}
		#background img{
			height: 100vh;
			width: 100%;
			top: 0px;
			left: 0px;
			opacity: 1;
			vertical-align: middle;
			border: 0;
			margin: 0;
			padding: 0;
			z-index: 0;
		}
		@media screen and (max-width: 1180px) {
		    #background img{
				height: 105vh;
				width: auto;
		    	opacity: 1;
		    }
		}
		
		input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
		  color: #ff0000;
		}
		
		input:-moz-placeholder, textarea:-moz-placeholder {
		  color: #ff5500;
		}
		
		input::-moz-placeholder, textarea::-moz-placeholder {
		  color: #ff0000;
		}
		
		input:-ms-input-placeholder, textarea:-ms-input-placeholder {
		  color: #ff0000;
		}
		
		.tl-price-input{
		    border: 1px solid #ccc;
		    padding: 7px 0;
		    background: rgba(255, 255, 255, 0.8);
		    border-radius: 3px;
		    padding-left:5px;
		    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
		    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
		}
		.tl-price-input:focus{
		    border-color: #66afe9;
		    outline: 0;
		    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
		    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
		}
		
		.ant-btn {
		    line-height: 1.499;
		    position: relative;
		    display: inline-block;
		    font-weight: 400;
		    white-space: nowrap;
		    text-align: center;
		    background-image: none;
		    border: 1px solid transparent;
		    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
		    box-shadow: 0 2px 0 rgba(0,0,0,0.015);
		    cursor: pointer;
		    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
		    transition: all .3s cubic-bezier(.645, .045, .355, 1);
		    -webkit-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    user-select: none;
		    -ms-touch-action: manipulation;
		    touch-action: manipulation;
		    height: 32px;
		    padding: 0 15px;
		    font-size: 14px;
		    border-radius: 4px;
		    color: rgba(0,0,0,0.65);
		    background-color: #fff;
		    border-color: #d9d9d9;
		}
		
		.ant-btn-primary {
		    color: #fff;
		    background-color: #1890ff;
		    border-color: #1890ff;
		    text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
		    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
		    box-shadow: 0 2px 0 rgba(0,0,0,0.045);
		}
		.ant-btn-red {
		    color: #fff;
		    background-color: #FF5A44;
		    border-color: #FF5A44;
		    text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
		    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
		    box-shadow: 0 2px 0 rgba(0,0,0,0.045);
		}
		
		
		
	</style>
</html>
